<template>
    <scroll-view class="scroll" :scroll-y="true">
        <view class="list-box">
            <view v-for="(item,index) in list" :key="index" class="list-item" @click="tapList(item)">
                <image class="list-img" :src="item.img" :mode="item.imgMode || 'aspectFill'"></image>
                <text class="list-name">{{ item.name }}</text>
            </view>
        </view>
    </scroll-view>
</template>

<script>
    // 更多
    export default{
        name: "more-list",
        props: {
            type: {
                type: String,
                default: ''
            }
        },
        computed:{
            list(){
                let list = [
                    {
                        name: '相册',
                        img: '/static/lrl/chat/img.png',
                        imgMode: 'heightFix',
                        type: 'images'
                    },
                    {
                        name: '文件',
                        img: '/static/lrl/chat/file.png',
                        imgMode: 'heightFix',
                        type: 'file'
                    },

                ]
                return list
            }
        },
        methods:{
            tapList({type}){
                this.$emit('change', type)
            },
        }
    }
</script>

<style scoped lang="scss">
.scroll{
    /* #ifndef APP-NVUE */
    height: 100%;
    /* #endif */
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}
.list-box{
    padding-top: 25rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.list-item{ 
    width: 177.5rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20rpx;
}
.list-img{
    width: 70rpx;
    height: 70rpx;
}
.list-name{
    font-size: 28rpx;
    color: #3c3c3b;
    margin-top: 15rpx;
}
</style>
